<!--
@description: 施工日志
@creationTime: 2025-04-15
-->

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '施工日志'
  }
}
</route>

<template>
  <wd-tabs v-model="tab">
    <wd-tab title="箱柜日志">
      <view class="bg-#fff w-100vw flex flex-col flex-justify-center flex-items-center bg-#4b89d5!">
        <view class="mt-5 mb-4 fw-600 font-size-35rpx c-#fff">冰鲜库</view>
        <view class="mb-3 fw-500 font-size-29rpx c-#fff">当前阶段：施工</view>
        <view class="mb-7 fw-500 font-size-29rpx c-#fff w50vw"><wd-progress color="##658523" :percentage="80" /></view>
      </view>
      <scroll-view class="h-83vh" scroll-y @scrolltolower="handleScrollToLower">
        <view class="b-l-blue ml-6 border-solid b-2 b-r-0 b-b-0 b-t-0 pb-6">
          <view class="pos-relative pl-6vw w-87vw">
            <view class="pos-absolute top-9 left-4 bg-#4b89d5 w-20rpx h-20rpx border-rd-50%"></view>
            <view class="py-3 pl-4">
              2023/13/15
              <wd-tag custom-class="space" type="success">2.5 小时</wd-tag>
            </view>
            <wd-card custom-class="p-0!">
              <wd-collapse viewmore v-model="value[0]">
                <view>
                  <view>张某：上传了勘察图片</view>
                  <view>
                    <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
                    <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
                  </view>
                </view>
              </wd-collapse>
            </wd-card>
          </view>
          <view class="pos-relative pl-6vw w-87vw">
            <view class="pos-absolute top-9 left-4 bg-#4b89d5 w-20rpx h-20rpx border-rd-50%"></view>
            <view class="py-3 pl-4">
              2023/13/15
              <wd-tag custom-class="space" type="success">2.5 小时</wd-tag>
            </view>
            <wd-card custom-class="p-0!">
              <wd-collapse viewmore v-model="value[1]">
                <view>
                  <view>张某：反馈问题</view>
                  <view>
                    <view>问题11111111111111111111111111111111111111111</view>
                    <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
                    <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
                  </view>
                </view>
              </wd-collapse>
            </wd-card>
          </view>
          <view class="pos-relative pl-6vw w-87vw">
            <view class="pos-absolute top-9 left-4 bg-#4b89d5 w-20rpx h-20rpx border-rd-50%"></view>
            <view class="py-3 pl-4">
              2023/13/15
              <wd-tag custom-class="space" type="success">2.5 小时</wd-tag>
            </view>
            <wd-card custom-class="p-0!">
              <wd-collapse viewmore v-model="value[2]">
                <view>
                  <view>李某：上传施工进度</view>
                  <view>
                    <view><wd-progress :percentage="80" /></view>
                    <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
                    <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
                  </view>
                </view>
              </wd-collapse>
            </wd-card>
          </view>
        </view>
      </scroll-view>
    </wd-tab>
    <wd-tab title="笔记">
      <view class="flex flex-justify-between m-4 flex-items-center">
        <text class="text-lg font-size-3 font-800">2023-12-25</text>
        <text class="font-size-3 c-#347cd0">笔记标题</text>
      </view>
      <view>
        <wd-card>
          <view>张某发布笔记</view>
          <view>
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
          <view>笔记内容:笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容</view>
        </wd-card>
      </view>
      <view class="flex flex-justify-between m-4 flex-items-center">
        <text class="text-lg font-size-3 font-800">2023-12-25</text>
        <text class="font-size-3 c-#347cd0">笔记标题</text>
      </view>
      <view>
        <wd-card>
          <view>张某发布笔记</view>
          <view>
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
          <view>笔记内容:笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容</view>
        </wd-card>
      </view>
    </wd-tab>
    <wd-tab title="问题上报">
      <view class="flex flex-justify-between m-4 flex-items-center">
        <text class="text-lg font-size-3 font-800">2023-12-25</text>
        <text class="font-size-3 c-#347cd0">冷冻库异常</text>
      </view>
      <view>
        <wd-card>
          <view>张某发布</view>
          <view>
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
          <view>冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常</view>
        </wd-card>
      </view>
      <view class="flex flex-justify-between m-4 flex-items-center">
        <text class="text-lg font-size-3 font-800">2023-12-25</text>
        <text class="font-size-3 c-#347cd0">冷冻库异常</text>
      </view>
      <view>
        <wd-card>
          <view>张某发布</view>
          <view>
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
          <view>冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常</view>
        </wd-card>
      </view>
      <view class="flex flex-justify-between m-4 flex-items-center">
        <text class="text-lg font-size-3 font-800">2023-12-25</text>
        <text class="font-size-3 c-#347cd0">冷冻库异常</text>
      </view>
      <view>
        <wd-card>
          <view>张某发布</view>
          <view>
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w300rpx h300rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
          <view>冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常冷冻库制冷异常</view>
        </wd-card>
      </view>
    </wd-tab>
    <wd-tab title="施工对比">
      <view>
        <wd-card>
          <view>
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
        </wd-card>
      </view>
      <view><wd-divider>勘察施工对比</wd-divider></view>
      <view>
        <wd-card>
          <view>
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
            <image class="w130rpx h130rpx" src="/src/static/工程图.jpg" mode="aspectFit" />
          </view>
        </wd-card>
      </view>
    </wd-tab>
  </wd-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref<boolean[]>([])
const tab = ref(0)
const handleScrollToLower = () => {
  console.log('到底了')
}
</script>

<style lang="scss" scoped></style>
